<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>♥</title>
	</head>
	<style type="text/css">
		body,html{
			width: 100%;
			height: 100%;
			background-color: gray;
			display: flex;
			justify-content: center;
			align-items: center;
			z-index: -1000;
			overflow: hidden;
		}
		.hearBottom{
			position: absolute;
			width: 300px;
			height: 300px;
			clip-path: polygon(0 100%,100% 0, 100% 100%);
			border-radius:  100% 50% 0% 50%;
			transform: rotate(45deg);
			background-color: red;
		}
		.heart{
			width: 300px;
			height: 300px;
			position: relative;
			animation: animation 0.7s linear 0s infinite reverse;
		}
		.heart::after,.heart::before{
			position: absolute;
			width: 220px;
			height: 220px;
			content: '';
			border-radius: 50%;
			background-color: red;
		}
		.heart::after{
			top: 25px;
			left: -30px;
		}
		.heart::before{
			top: 25px;
			right: -30px;
		}
		@keyframes animation{
			0%{
				transform: scale(1);
			}
			50%{
				transform: scale(1.1);
			}
			75%{
				transform: scale(1.3);
			}
			100%{
				transform: scale(1);
			}
		}
	</style>
	<body>
		<div class="heart">
			<div class="hearBottom"></div>
		</div>
	</body>
</html>
